<!--
 * @Author: jhy
 * @Date: 2024-08-08 11:37:24
 * @LastEditTime: 2024-08-08 17:46:58
 * @LastEditors: jhy
 * @Description: 
 * @FilePath: /yiyu/szzjzc/src/views/productDetail.vue
-->
<template>
  <div class="productDetail" style="width: 100%; height: 100%">
    <div v-if="isType == 1" style="width: 100%; height: 100%">
      <!-- u2085 -->
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          background: #e9e9e9;
        "
      >
        <img src="@/assets/u2085.png" />
      </div>

      <div class="bl-con">
        <div class="list">
          <div class="title">
            <img src="@/assets/iicon01.png" />
            <span class="txt">办理手续简</span>
          </div>
          <div class="text">
            足不出户办理贷款 <br />
            申请、用款、还款
          </div>
        </div>
        <div class="list">
          <div class="title">
            <img src="@/assets/iicon02.png" />
            <span class="txt">贷款金额高</span>
          </div>
          <div class="text">
            单户不超过 <br />
            500万元
          </div>
        </div>
        <div class="list">
          <div class="title">
            <img src="@/assets/iicon03.png" />
            <span class="txt">融资利率低</span>
          </div>
          <div class="text">
            给予普惠金融 <br />
            优惠利率
          </div>
        </div>
        <div class="list">
          <div class="title">
            <img src="@/assets/iicon04.png" />
            <span class="txt">准入门槛低</span>
          </div>
          <div class="text">
            适用于入驻平台且中标的浙 <br />
            建采购上游小微企业供应商
          </div>
        </div>
      </div>

      <div class="loan-apply">
        <div class="content">
          <div class="note">
            温馨提示：<br />
            无中信账户，可在获得预授信额度后，线下就近开立中信银行账号及网银办理提款
          </div>
        </div>
      </div>

      <div class="sl-con">
        <div class="list">
          <div class="left">
            <img src="@/assets/u2091.svg" />
          </div>
          <div class="right">
            <div class="txt">
              我行依托核心企业供应链场景，整合交易数据以及小微法人税务、工商、司法、征信等通用数据，构建大数据风控模型，为上游供应商提供的全线上、标准化的数据融资服务支持。
            </div>
            <br />
            <div class="txt">中信银行股份有限公司杭州西湖支行</div>
          </div>
        </div>
        <div class="list">
          <div class="left">
            <img src="@/assets/u2092.svg" />
          </div>
          <div class="right">
            <div class="txt">授信额度：最高500万元</div>
            <br />
            <div class="txt">授信期限：最长12个月，单户期限：6个月</div>
            <br />
            <div class="txt">贷款利率：4.0%起</div>
          </div>
        </div>
        <div class="list">
          <div class="left">
            <img src="@/assets/u2090.svg" />
          </div>
          <div class="right">
            <div class="txt">支付方式：定向支付给核心企业</div>
            <br />
            <div class="txt">
              担保方式：无抵押，借款企业实际控制人提供连带责任担保
            </div>
          </div>
        </div>
      </div>

      <div class="pp-con">
        <!-- <div class="list">
                    <img src="@/assets/u2079.svg" />
                    <div class="txt">公司客户经理：王晟涛</div>
                    <div class="txt">联系电话：15858134616</div>
                </div>
                <div class="list">
                    <img src="@/assets/u2080.svg" />
                    <div class="txt">公司客户经理：郑宝强</div>
                    <div class="txt">联系电话：13777474235</div>
                </div> -->
      </div>
    </div>
    <div v-else style="width: 100%; height: 100%">
      <img
        src="https://img.alicdn.com/imgextra/i3/O1CN01NNKmVi1v9asmLZ1vt_!!6000000006130-0-tps-1920-1080.jpg"
        alt="/"
        style="width: 100%; height: 100%"
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isType: null,
    };
  },
  mounted() {
    this.isType = this.$route.query.id;
  },
};
</script>

<style lang="scss" scoped>
.productDetail {
  .bl-con {
    display: flex;
    padding: 3rem;
    background: #fff;

    .list {
      width: 25%;
      text-align: center;

      .title {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 20px;
          margin-right: 5px;
        }

        .txt {
          font-size: 1.3rem;
          color: #333;
        }
      }

      .text {
        font-size: 0.8rem;
        color: #333;
        line-height: 1.2;
        opacity: 0.5;
      }
    }
  }

  .loan-apply {
    background-image: url("~@/assets/bg_aa.jpg");
    background-position: 50%;
    background-size: cover;
    height: 450px;

    .content {
      position: relative;
      margin: 0 auto;
      width: 1200px;
      height: 100%;
      color: #666;
      line-height: 20px;

      .note {
        position: absolute;
        top: 160px;
        left: 156px;
        width: 200px;
      }

      .already-apply {
        position: absolute;
        left: 50%;
        bottom: 20px;
        margin-left: -130px;
        width: 260px;
        text-align: center;
      }
    }
  }

  .sl-con {
    display: flex;
    justify-content: space-between;
    // justify-content: space-around;

    .list {
      width: 32%;
      height: 225px;
      margin: 2rem 0;
      display: flex;
      box-sizing: border-box;
      padding: 30px;
      background: #eceff7;
      border-radius: 1rem;

      .left {
        margin-right: 15px;

        img {
          width: 50px;
        }
      }

      .right {
        max-width: 347px;

        .txt {
          font-size: 18px;
          color: #555;
          line-height: 1.2;
        }
      }
    }
  }

  .pp-con {
    display: flex;
    justify-content: space-around;
    margin-top: 18px;

    .list {
      padding: 30px 165px;
      background: rgb(238 241 249);
      border-radius: 20px;
      text-align: center;

      img {
        margin-bottom: 20px;
      }

      .txt {
        width: 412px;
        height: 79px;
        color: #182b53;
        border: 1px solid rgba(24, 43, 83, 1);
        line-height: 79px;
        text-align: center;
        margin-bottom: 30px;
        font-size: 1.5rem;
        border-radius: 6px;
      }
    }
  }
}
</style>
